<template>
    <div class="e-table">
        <el-table
            :data="tableData"
            border
            style="width: 100%"
            :cell-class-name="cellClsNm"
            @cell-click="cellClick"
            @cell-mouse-enter="cellMouseEnter"
            @cell-mouse-leave="cellMouseLeave"
            :max-height="$store.state.tableHeight"
            ref="table"
            v-sortTable="{ tableData: tableData, _this: this, ref: 'table' }"
        >
            <!--  -->
            <!-- <el-table-column show-overflow-tooltip width="100" label="操作" > </el-table-column> -->
            <el-table-column show-overflow-tooltip prop="gmtCreate" label="关闭日期" width="160" class-name="blue-column">
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="founderName" label="执行人">
            </el-table-column>
            <el-table-column
                show-overflow-tooltip
                prop="closeReason"
                label="关闭原因"
            >
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="orgName" label="关闭机构" min-width="200">
            </el-table-column>
            <el-table-column
                show-overflow-tooltip
                prop="state"
                label="状态"
                :formatter="formatter"
                width="100"
            >
            </el-table-column>
            <!-- fixed="right" -->
            <!-- <el-table-column show-overflow-tooltip label="" width="1">
                <template slot-scope="scope">
                    <div>
                        <i
                            class="el-icon-edit"
                            style="cursor: pointer; font-size: 20px"
                            :class="{
                                'icon-edit-active-color': MouseEnterId == scope.row.billId
                            }"
                            @click="editData(scope.row.billId)"
                        ></i>
                    </div>
                </template>
            </el-table-column> -->
        </el-table>
        <ComPagination
            :total="pagination.total"
            :pageSize.sync="pagination.pageSize"
            :currentPage.sync="pagination.currentPage"
            @currentChange="findByApplyId"
            @sizeChange="findByApplyId"
        />
        <el-dialog title="高级搜索" :visible.sync="dialogVisibleSearch" width="40%" :modal="false">
            <div class="item">
                <span>机构</span>
                <el-input v-model="input1" placeholder="请输入内容" size="mini"></el-input>
            </div>
            <div class="item">
                <span>计划日期</span>
                <el-date-picker v-model="value1" size="mini"> </el-date-picker>
                <span class="separate">—</span>
                <el-date-picker arrow-control v-model="value2" size="mini"> </el-date-picker>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="mini" class="btn-greenYellow">重置</el-button>
                <el-button size="mini" class="btn-blue">确定</el-button>
            </span>
        </el-dialog>
        <!-- <ComMaskAdd ref="ComMaskAdd" @refreshTable="tenderApplyListByEntity" /> -->
    </div>
</template>

<script>
import ComPagination from '@/components/pagination/pagination.vue'
// import ComMaskAdd from './mask/add'
// import applyCloseRequest from '@/api/tender/applyClose.js'
import equipmentLeasingRequest from '@/api/tender/equipmentLeasing.js'
import { mapState } from 'vuex'
// import {}

export default {
    data () {
        return {
            // 主页
            input1: '',
            // mask搜索
            value1: '',
            value2: '',
            dialogVisibleSearch: false,
            MouseEnterId: 0,
            tableData: [],
            pagination: {
                total: 0,
                pageSize: 20,
                currentPage: 1
            },
            iconActiveColor: {
                id: '',
                type: ''
            }
        }
    },
    computed: {
        ...mapState({
            options: state => state.biddingApplication.dictionaries
        }),
        tenderId () {
            return this.$route.query.tenderId || this.$route.query.billid
        }
    },
    components: {
        ComPagination
        // ComMaskAdd
    },
    created () {
        this.findByApplyId()
    },
    methods: {
        // eslint-disable-next-line no-unused-vars
        cellClick (row, column, cell, event) {
            if (column.label === '关闭日期') {
                this.$router.push({
                    path: './equipHireBidClosingEdit',
                    query: { billid: row.billId }
                })
            }
        },
        // iconMouseover (id, type) {
        //     this.iconActiveColor.id = id
        //     this.iconActiveColor.type = type
        // },
        // iconMouseleave () {
        //     this.iconActiveColor.id = {
        //         id: '',
        //         type: ''
        //     }
        // },
        editData (billId) {
            this.$router.push({
                path: './equipHireBidClosingEdit',
                query: { billId }
            })
        },
        findByApplyId () {
            equipmentLeasingRequest
                .closeListById({ tenderApplyId: this.tenderId })
                .then(res => {
                    this.tableData = res
                    this.pagination.total = res.totalCount || res.length
                })
        },
        // eslint-disable-next-line no-unused-vars
        formatter (row, column, cellValue, index) {
            if (column.label === '采购方式') {
                return this.options.tenderForm.map(item => {
                    if (String(index) === cellValue) {
                        return item
                    }
                })
            } else if (column.label === '招标类型') {
                return this.options.tenderClass.map((item, index) => {
                    if (index + 1 === cellValue) {
                        return item
                    }
                })
            } else if (column.label === '状态') {
                const state = new Map(Object.entries(this.options.state))
                const arr = []
                state.forEach((item, index) => {
                    arr[index] = item
                })
                return arr.map((item, index) => {
                    if (index === cellValue) {
                        return item
                    }
                })
            } else if (column.label === '发布状态') {
                return this.options.releaseState.map((item, index) => {
                    if (index === cellValue) {
                        return item
                    }
                })
            }
        },
        openAddDialog () {
            this.$router.push('./equipHireBidClosingAdd')
            // this.$refs.ComMaskAdd.getVuexData()
            // this.$refs.ComMaskAdd.dialogVisible = true
        },
        cellClsNm ({ column }) {
            if (column.label === '') {
                return 'fixed-left'
            }
        },
        cellMouseEnter (row) {
            this.MouseEnterId = row.billId
        },
        cellMouseLeave () {
            this.MouseEnterId = 0
        }
    }
}
</script>

<style lang="scss" scoped></style>
